<template>
    <div class="main">
        <el-container class="container">
            <el-aside width="200px" class="aside">
                <nav-aside />
            </el-aside>
            <el-container class="container">
                <el-header class="header" :style="{ backgroundColor: store.theme.bgColor }">
                    <nav-header />
                </el-header>
                <el-main class="main" :style="{ backgroundColor: store.theme.mainBgColor }">
                    <router-view v-slot="{ Component }">
                        <suspense>
                            <component :is="Component"></component>
                            <template #fallback>
                                <div v-loading="true" style="height: 100%"></div>
                            </template>
                        </suspense>
                    </router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup>
import navAside from "@/components/navAside.vue";
import navHeader from "@/components/navHeader.vue";
import { mainStore } from "@/store/main.js";
const store = mainStore();
</script>

<style lang="less" scoped>
.main {
    width: 100%;
    height: 100%;
    .container {
        width: 100%;
        height: 100%;
        .aside {
            background-color: #1c3646;
            &::-webkit-scrollbar {
                display: none;
            }
        }
        .main {
            height: calc(100% - 56px);
            overflow: auto;
        }
    }
    .header {
        height: 56px;
    }
}
</style>
